<template>
  <div>
    <BaseHeaderMenuWhite bg-color="white" />
    <div class="my-shop-container">

      <div v-if="loading" class="loading">
        <el-loading text="加载中..." />
      </div>

      <div v-else-if="shopInfo" class="shop-content">
        <!-- 店铺基本信息 -->
        <el-card class="shop-basic-info" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>店铺基本信息</span>
              <el-tag :type="getStatusType(shopInfo.status)">
                {{ getStatusText(shopInfo.status) }}
              </el-tag>
            </div>
          </template>

          <div class="shop-info-grid">
            <div class="shop-avatar">
              <el-avatar :size="80" :src="shopInfo.shopAvatar" />
            </div>

            <div class="shop-details">
              <h2>{{ shopInfo.shopName }}</h2>
              <p class="shop-intro">{{ shopInfo.introduction }}</p>

              <div class="shop-stats">
                <div class="stat-item">
                  <span class="label">店铺评分:</span>
                  <el-rate v-model="shopInfo.score" disabled show-score />
                </div>

                <div class="stat-item">
                  <span class="label">信用等级:</span>
                  <el-tag :type="getCreditLevelType(shopInfo.creditLevel)">
                    {{ getCreditLevelText(shopInfo.creditLevel) }}
                  </el-tag>
                </div>

                <div class="stat-item">
                  <span class="label">回复率:</span>
                  <span>{{ shopInfo.replyRate }}%</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 店铺统计 -->
        <el-card class="shop-statistics" shadow="hover">
          <template #header>
            <span>店铺统计</span>
          </template>

          <div class="stats-grid">
            <div class="stat-card">
              <div class="stat-number">{{ shopInfo.orderCount }}</div>
              <div class="stat-label">累计订单</div>
            </div>

            <div class="stat-card">
              <div class="stat-number">{{ shopInfo.followCount }}</div>
              <div class="stat-label">关注人数</div>
            </div>

            <div class="stat-card">
              <div class="stat-number">{{ shopInfo.caseCount }}</div>
              <div class="stat-label">案例作品</div>
            </div>

            <div class="stat-card">
              <div class="stat-number">{{ shopInfo.creditScore }}</div>
              <div class="stat-label">信用分数</div>
            </div>
          </div>
        </el-card>

        <!-- 联系方式 -->
        <el-card class="contact-info" shadow="hover">
          <template #header>
            <span>联系方式</span>
          </template>

          <div class="contact-grid">
            <div class="contact-item">
              <el-icon>
                <Phone />
              </el-icon>
              <span>{{ shopInfo.contactPhone }}</span>
            </div>

            <div class="contact-item">
              <el-icon>
                <ChatDotRound />
              </el-icon>
              <span>{{ shopInfo.contactWechat }}</span>
            </div>

            <div class="contact-item">
              <el-icon>
                <Location />
              </el-icon>
              <span>{{ shopInfo.address }}</span>
            </div>
          </div>
        </el-card>

        <!-- 技能列表 -->
        <el-card class="skills-info" shadow="hover" v-if="shopInfo.skills && shopInfo.skills.length > 0">
          <template #header>
            <span>技能专长</span>
          </template>

          <div class="skills-list">
            <el-tag v-for="skill in shopInfo.skills" :key="skill.id" :type="skill.isMain ? 'primary' : 'info'"
              class="skill-tag">
              {{ skill.skillName }} ({{ skill.experienceYear }}年经验)
              <el-icon v-if="skill.isMain">
                <Star />
              </el-icon>
            </el-tag>
          </div>
        </el-card>

        <!-- 教育背景 -->
        <el-card class="education-info" shadow="hover" v-if="shopInfo.educations && shopInfo.educations.length > 0">
          <template #header>
            <span>教育背景</span>
          </template>

          <div class="education-list">
            <div v-for="edu in shopInfo.educations" :key="edu.id" class="education-item">
              <div class="edu-school">{{ edu.schoolName }}</div>
              <div class="edu-details">
                <el-tag size="small">{{ getEducationTypeText(edu.type) }}</el-tag>
                <span class="edu-time">{{ edu.graduateTime }}</span>
                <el-tag v-if="edu.fullTime" type="success" size="small">全日制</el-tag>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 保证金信息 -->
        <el-card class="deposit-info" shadow="hover">
          <template #header>
            <span>保证金信息</span>
          </template>

          <div class="deposit-content">
            <div class="deposit-status">
              <span class="label">状态:</span>
              <el-tag :type="getDepositStatusType(shopInfo.depositStatus)">
                {{ getDepositStatusText(shopInfo.depositStatus) }}
              </el-tag>
            </div>

            <div class="deposit-amount" v-if="shopInfo.depositAmount">
              <span class="label">金额:</span>
              <span class="amount">¥{{ shopInfo.depositAmount }}</span>
            </div>

            <div class="deposit-time" v-if="shopInfo.depositPayTime">
              <span class="label">缴纳时间:</span>
              <span>{{ shopInfo.depositPayTime }}</span>
            </div>
          </div>
        </el-card>
      </div>

      <div v-else class="error-message">
        <el-empty description="暂无店铺信息" />
      </div>
    </div>
    <BaseFooter />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getMyShopInfo } from '~/api/user'
import { ElMessage } from 'element-plus'
import { Phone, ChatDotRound, Location, Star } from '@element-plus/icons-vue'

// 响应式数据
const shopInfo = ref(null)
const loading = ref(false)

// 获取店铺信息
const fetchShopInfo = async () => {
  try {
    loading.value = true
    const response = await getMyShopInfo()

    if (response.code === 200) {
      shopInfo.value = response.data
    } else {
      ElMessage.error(response.msg || '获取店铺信息失败')
    }
  } catch (error) {
    console.error('获取店铺信息失败:', error)
    ElMessage.error('获取店铺信息失败')
  } finally {
    loading.value = false
  }
}

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    0: 'warning', // 待审核
    1: 'success', // 正常
    2: 'danger'   // 禁用/冻结
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待审核',
    1: '正常',
    2: '禁用/冻结'
  }
  return statusMap[status] || '未知'
}

// 获取信用等级类型
const getCreditLevelType = (level) => {
  const levelMap = {
    0: 'info',    // 普通
    1: 'primary', // 较好
    2: 'success', // 优秀
    3: 'warning', // 极好
    4: 'danger'   // 完美
  }
  return levelMap[level] || 'info'
}

// 获取信用等级文本
const getCreditLevelText = (level) => {
  const levelMap = {
    0: '普通',
    1: '较好',
    2: '优秀',
    3: '极好',
    4: '完美'
  }
  return levelMap[level] || '未知'
}

// 获取教育类型文本
const getEducationTypeText = (type) => {
  const typeMap = {
    0: '小学',
    1: '初中',
    2: '高中',
    3: '大专',
    4: '本科',
    5: '硕士',
    6: '博士'
  }
  return typeMap[type] || '未知'
}

// 获取保证金状态类型
const getDepositStatusType = (status) => {
  const statusMap = {
    0: 'warning', // 未缴纳
    1: 'success', // 已缴纳
    2: 'danger',  // 冻结
    3: 'primary', // 退还中
    4: 'info'     // 已退还
  }
  return statusMap[status] || 'info'
}

// 获取保证金状态文本
const getDepositStatusText = (status) => {
  const statusMap = {
    0: '未缴纳',
    1: '已缴纳',
    2: '冻结',
    3: '退还中',
    4: '已退还'
  }
  return statusMap[status] || '未知'
}

// 页面加载时获取数据
onMounted(() => {
  fetchShopInfo()
})
</script>

<style scoped>
.my-shop-container {
  min-height: calc(100vh - 200px);
  background: #f8f9fa;
  padding: 40px 20px;
}

.shop-header {
  max-width: 1200px;
  margin: 0 auto 30px;
  text-align: center;
}

.shop-header h1 {
  color: #333;
  font-size: 28px;
  font-weight: 600;
  margin: 0;
  padding: 20px 0;
}

.loading {
  text-align: center;
  padding: 100px;
  background: #fff;
  border-radius: 12px;
  max-width: 1200px;
  margin: 0 auto;
}

.shop-content {
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.el-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.el-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.shop-info-grid {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.shop-avatar {
  flex-shrink: 0;
}

.shop-details {
  flex: 1;
}

.shop-details h2 {
  margin: 0 0 12px 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.shop-intro {
  color: #666;
  margin-bottom: 20px;
  line-height: 1.6;
  font-size: 14px;
}

.shop-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stat-item .label {
  font-weight: 500;
  color: #333;
  min-width: 80px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.stat-card {
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-label {
  font-size: 14px;
  opacity: 0.9;
}

.contact-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #333;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.contact-item:hover {
  background: #e9ecef;
  transform: translateX(4px);
}

.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.skill-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.skill-tag:hover {
  transform: scale(1.05);
}

.education-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.education-item {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #409eff;
  transition: all 0.3s ease;
}

.education-item:hover {
  background: #e9ecef;
  border-left-color: #67c23a;
}

.edu-school {
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  font-size: 16px;
}

.edu-details {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.edu-time {
  color: #666;
  font-size: 14px;
}

.deposit-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.deposit-content>div {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.deposit-content .label {
  font-weight: 500;
  color: #333;
  margin-right: 12px;
  min-width: 80px;
}

.amount {
  font-size: 20px;
  font-weight: bold;
  color: #e6a23c;
}

.error-message {
  text-align: center;
  padding: 100px;
  background: #fff;
  border-radius: 12px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .my-shop-container {
    padding: 20px 15px;
  }

  .shop-header h1 {
    font-size: 24px;
  }

  .shop-info-grid {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .stat-card {
    padding: 20px;
  }

  .stat-number {
    font-size: 24px;
  }

  .edu-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .contact-item {
    padding: 16px 12px;
  }

  .education-item {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .my-shop-container {
    padding: 15px 10px;
  }

  .shop-header h1 {
    font-size: 20px;
    padding: 15px 0;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    padding: 16px;
  }

  .stat-number {
    font-size: 20px;
  }

  .skills-list {
    gap: 8px;
  }

  .skill-tag {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .my-shop-container {
    background: #1a1a1a;
  }

  .shop-header h1 {
    color: #fff;
  }

  .el-card {
    background: #2d2d2d;
    color: #fff;
  }

  .contact-item,
  .education-item,
  .deposit-content>div {
    background: #3a3a3a;
    color: #fff;
  }

  .shop-intro,
  .edu-time {
    color: #ccc;
  }
}
</style>